<template>
  <div>
    <el-card
      class="song"
      :body-style="{ padding: '0px' }"
    >
      <img src="../../assets/song.jpeg" />
      <div class="mask"></div>
      <div class="info">
        <div>
          {{ songDetail.name }} - {{ songDetail.creator }}
        </div>
        <div>歌曲播放价格: {{ songDetail.playprice }} 欢乐值</div>
        <div>已购买量: {{ songDetail.playcount }}</div>
        <div>{{ songDetail.creator }} 已通过这首作品分得 {{ songDetail.rewardcount }}.</div>
        <div class="try-play">
          <el-button type="text">试听</el-button>
        </div>
      </div>
      <el-button-group>
        <el-button
          type="primary"
          @click="showBuySongDialog = true"
        >购买并加入我的歌库</el-button>
        <el-button
          type="warning"
          @click="showAuthDialog = true"
        >申请购买商业使用授权</el-button>
      </el-button-group>
    </el-card>
    <el-dialog
      title="确认购买并加入歌库"
      width="30%"
      :visible.sync="showBuySongDialog"
      center
    >
      <span>确认购买并加入我的歌库?</span>
      <span slot="footer">
        <el-button
          type="primary"
          @click="addSong"
        >确认购买</el-button>
        <el-button @click="showBuySongDialog = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="申请购买商业使用授权"
      width="40%"
      :visible.sync="showAuthDialog"
      center
    >
      <el-form
        label-width="80px"
        ref="authForm"
        :rules="authFormRules"
        :model="authFormData"
      >
        <el-form-item
          label="授权时间"
          prop="authtime"
        >
          <el-input clearable></el-input>
        </el-form-item>
        <el-form-item
          label="场景"
          prop="authsign"
        >
          <el-input clearable></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <span>1024 元</span>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          type="primary"
          @click="applyAuth"
        >确认申请</el-button>
        <el-button @click="showAuthDialog = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'Song',
  mounted() {
    this.sid = this.$route.params.id;
    this.getSong(this.sid);
  },
  data() {
    return {
      sid: 0,
      showBuySongDialog: false,
      showAuthDialog: false,
      authFormData: {},
      authFormRules: {
        authtime: [{ required: true, message: '请输入授权时间!', trigger: 'blur' }],
        authsign: [{ required: true, message: '请输入场景!', trigger: 'blur' }],
      },
    };
  },
  computed: {
    ...mapGetters([
      'songDetail',
    ]),
  },
  methods: {
    ...mapActions([
      'getSong',
      'buySongAuth',
    ]),
    addSong() {
      this.$message.success('购买成功!');
      this.showBuySongDialog = false;
    },
    applyAuth() {
      this.$refs.authForm.validate((valid) => {
        if (valid) {
          this.buySongAuth(this.authFormData)
            .then((meta) => {
              this.$message.success(meta.msg || '申请成功,请等待审核!');
            })
            .catch((meta) => {
              this.$message.error(meta.msg || '申请失败!');
            })
            .then(() => {
              this.showAuthDialog = false;
            });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-card {
  width: 500px;
  margin: 50px auto;
}

img {
  width: 100%;
  max-height: 400px;
}

.info {
  padding: 5px 10px;
  text-align: center;
  position: relative;
}

.info > div {
  margin: 5px 0;
}

.el-button-group .el-button {
  width: 250px;
  border-radius: 0;
}

/* 试听 */
.try-play {
  position: absolute;
  right: 20px;
  top: 0;
}
</style>
